/**
 * 工厂页新旧型体占比图表组件
 */
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'
import http from '@/axios/http'
import adaptivePx from '@/utils/adaptivePx'

const route = useRoute()
const factory = ref(route.query.factory)

const main = ref()
const proportionChart = ref()
let myChart = null

async function getProportionChart() {
  await http.post("/factory/getProportionChart", {
    factory: factory.value
  }).then(res => {
    proportionChart.value = res.data
  })
}

function init() {
  myChart = echarts.init(main.value, null, { renderer: 'svg' })

  let option = {
    title: {
      text: '新旧型体占比',
      textStyle: {
        color: 'white',
        fontSize: adaptivePx(16),
        fontWeight: 'normal'
      },
      right: '2%',
      top: '2%'
    },
    color: ['#2fa8c3', '#1e90ff'],
    legend: {
      textStyle: {
        color: 'white',
        fontSize: adaptivePx(12),
        fontWeight: 'normal'
      },
      orient: 'vertical',
      icon: 'circle',
      right: '0%',
      bottom: '0%',
      data: ['新型体产量', '旧型体产量']
    },
    series: {
      type: 'pie',
      data: [
        {
          name: '新型体产量',
          value: proportionChart.value.new_qty ? proportionChart.value.new_qty : 0
        },
        {
          name: '旧型体产量',
          value: proportionChart.value.old_qty ? proportionChart.value.old_qty : 0
        }
      ],
      center: ['34%', '46%'],
      radius: ['40%', '60%'],
      label: {
        show: true,
        position: 'center',
        color: 'white',
        fontSize: adaptivePx(16),
        fontWeight: 'normal',
        formatter: function () {
          if (proportionChart.value.tot_qty) {
            if (proportionChart.value.new_qty >= 1000) {
              if (proportionChart.value.old_qty >= 1000) {
                return Math.round(proportionChart.value.new_qty / 1000) + 'k/\n' + Math.round(proportionChart.value.old_qty / 1000) + 'k'
              } else {
                return Math.round(proportionChart.value.new_qty / 1000) + 'k/\n' + proportionChart.value.old_qty
              }
            } else {
              if (proportionChart.value.old_qty >= 1000) {
                return proportionChart.value.new_qty + '\n' + Math.round(proportionChart.value.old_qty / 1000) + 'k'
              } else {
                return proportionChart.value.new_qty + '\n' + proportionChart.value.old_qty
              }
            }
          } else {
            return '暂无数据'
          }
        }
      },
      labelLine: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          color: 'white',
          fontSize: adaptivePx(16),
          fontWeight: 'normal',
          formatter: function (params) {
            if (!params.value) {
              return '暂无数据'
            }
            if (params.value >= 1000) {
              return Math.round(params.value / 1000) + 'k'
            } else {
              return params.value
            }
          }
        },
        focus: 'self'
      },
      blur: {
        itemStyle: {
          opacity: 0.9
        }
      }
    },
    tooltip: {
      backgroundColor: 'rgba(171, 182, 212, 0.9)',
      textStyle: {
        color: 'black',
        fontSize: adaptivePx(14),
        fontWeight: 'normal'
      },
      formatter: function (params) {
        let content = ''

        if (params.name == '新型体产量') {
          content += `
            <div style="display: inline-block; width: 10px; height: 10px; border-radius: 5px; background-color: #2fa8c3;"></div>&nbsp;
            新型体产量&emsp;
          `
        } else if (params.name == '旧型体产量') {
          content += `
            <div style="display: inline-block; width: 10px; height: 10px; border-radius: 5px; background-color: #1e90ff;"></div>&nbsp;
            旧型体产量&emsp;
          `
        }

        content += params.value ? (params.value.toLocaleString() + '&nbsp;双') : '暂无数据'

        return content
      }
    }
  }

  myChart.setOption(option)

  myChart.on('legendselectchanged', () => {
    event.stopPropagation()
  })
}

function myChartResize() {
  if (myChart) {
    myChart.resize()
  }
}

onMounted(async () => {
  await getProportionChart()
  init()

  window.addEventListener('resize', myChartResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', myChartResize)
})
</script>

<template>
  <div id="factory-proportion-chart" ref="main"></div>
</template>

<style lang="scss" scoped>
#factory-proportion-chart {
  width: 100%;
  height: 100%;
}
</style>